<script setup lang="ts" name="BpmnToolbar">
import Imports from './components/Imports.vue'
import Exports from './components/Exports.vue'
import Previews from './components/Previews.vue'
import Commands from './components/Commands.vue'
import ExternalTools from './components/ExternalTools.vue'
import Scales from './components/Scales.vue'
import Aligns from './components/Aligns.vue'

const props = defineProps({
  commands: {
    type: Object,
    default: null
  }
})
const { commands } = toRefs(props)
</script>

<template>
  <div class="modeler-header">
    <div class="button-group">
      <Imports></Imports>
      <Exports></Exports>
      <Previews></Previews>
    </div>
    <Commands :commands="commands"></Commands>
    <Aligns></Aligns>
    <Scales></Scales>
    <ExternalTools></ExternalTools>
  </div>
</template>

<style scoped lang="scss">
.modeler-header {
  display: flex;
  flex-wrap: wrap;
  background: var(--el-fill-color-blank) url("@/assets/line.svg") left 0 top 0;

  .button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 2px 2px 3px;
    border-right: 1px solid var(--el-border-color-lighter);

    .el-dropdown {
      .item-button {
        width: auto;
        line-height: 0;

        .el-icon {
          margin-left: 6px;
        }

        .el-icon+.el-icon {
          margin-right: 2px;
          margin-left: 0;
        }
      }
    }

    .item-button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      margin: 2px;
      border-radius: 2px;
      cursor: pointer;

      &.input {
        width: 70px;
      }

      &:hover {
        background-color: var(--el-color-primary-light-9);

        .el-icon {
          color: var(--el-color-primary);
        }
      }

      .el-icon {
        font-size: 20px !important;
      }
    }
  }
}
</style>
